<template>
  <div id="header" class="clearfix">
    <div class="logo fl"><router-link to="/">{{config.title}}</router-link></div>
    <div class="fr">
      <ul>
        <li class="nav-item home fl"><router-link to="/">首页</router-link></li>
        <li v-for="(item, index) in items" class="nav-item fl">
          <router-link :to="item.path">{{item.name}}</router-link>
          <div class="sub-nav" v-if="item.childs">
            <router-link :to="child.path" v-for="(child, index) in item.childs" v-if="child.id != 15" >{{child.name}}</router-link>
            <a :href="child.path" v-for="(child, index) in item.childs" v-if="child.id == 15" >{{child.name}}</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import nav from '../../data/navData.json'
  export default{
    props: {
      config: {
        type: Object
      }
    },
    data () {
      return {
        items: nav.data
      }
    },
    computed: {
    },
    methods: {
    },
    components: {

    }
  }
</script>
<style scoped>
  #header{background-color: rgba(34, 88, 150, .8); height: 90px; line-height: 90px;position: fixed; top: 0; width: 100%; z-index: 1000}
  #header .logo{margin-left: 70px;}
  #header ul{margin-right: 70px;}
  #header a{ color: #fff; font-size: 16px}
  #header .logo a{font-size: 24px}
  #header li{position: relative}
  #header li a{padding: 0 30px}
  #header li a:hover,#header li a.router-link-exact-active{color: #26c3da}
  #header li:hover .sub-nav{display: block}
  #header .sub-nav{position: absolute; background-color: rgba(34, 88, 150, .8); line-height: 30px; display: none; padding-bottom: 10px;}
  #header .sub-nav a{display: block;  font-size: 14px ; text-align: center}
</style>
